<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>users</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/icon.css">
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <!-- 操作 及显示日期 -->
    <script type="text/javascript" src="../js/jquery.moment.js"></script>
    <!-- moment.js cdn -->
    <!-- <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.js"></script> -->
    <style>
        body,html {margin: 0;padding: 0}
    </style>

</head>

<body>
    <!-- 只放一个表格即可 -->
    <table id="dg" style="height:100%;width: 99%"></table>
    <!-- 用户搜索 -->
    <div id="tb" style="padding:2px 5px;">
            用户名: <input class="easyui-textbox" style="width:110px" id="searchName">
            <a href="#" class="easyui-linkbutton" iconCls="icon-search" id="searchData">查询数据</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" id="addData">新增数据</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" id="removesData">批量删除</a>
        </div>
    <!-- 弹出的框  默认为关闭-->
    <div id="dlg" class="easyui-dialog" title="新增数据操作" data-options="closed:true,iconCls:'icon-save'" style="width:500px;padding:10px">
        <!-- 放置表单 -->
        <form id="ff" method="post">
            <!-- 姓名 -->
            <input type="hidden" name="_id">
            <div style="margin-bottom:20px;margin-top: 20px;">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'姓名:',required:true">
            </div>
            <!-- 性别 -->
            <div style="margin-bottom:20px">
                <select class="easyui-combobox" name="sex" label="性别" style="width:100%;">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <!-- 年龄 -->
            <!-- <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="age" style="width:100%" data-options="label:'年龄:',required:true,validType:'agenum'">
            </div> -->
            <!-- 爱好 -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="hobby" style="width:100%;height:60px" data-options="label:'评论:',multiline:true">
            </div>
            <!-- 生日 -->
            <!-- <div style="margin-bottom:20px">
                <span style="margin-right: 50px;">出生日期:</span> <input id="dd" name='brithday'type="text" class="easyui-datebox" style="width:30%;padding-left:30px;margin-left:30px;"
                    required="true">
            </div> -->

            <!-- 职业 -->
            <!-- <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="work" style="width:100%" data-options="label:'评论时间:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="work" style="width:100%" data-options="label:'过期时间:',required:true">
            </div> -->
            <!-- 手机号 -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="tel" style="width:100%" data-options="label:'手机号码:',required:true,validType:'phoneNum'">
            </div>
            <!-- 邮箱 -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'邮箱:',required:true,validType:'email'">
            </div>
            <!-- 学历 -->
            <div style="margin-bottom:20px">
                <select class="easyui-combobox" name="edu" label="学历" style="width:100%">
                    <option value="博士生">博士生</option>
                    <option value="研究生">研究生</option>
                    <option value="本科">本科</option>
                    <option value="专科">专科</option>
                    <option value="高中">高中</option>
                    <option value="初中">初中</option>
                    <option value="小学">小学</option>
                    <option value="幼儿园" >幼儿园</option>
                    <option value="胎教">胎教</option>

                </select>
            </div>
            <!-- 入职时间 -->
            <!-- <div style="margin-bottom:20px">
                <span style="margin-right: 50px;">入职时间:</span> <input id="dd" name='boardDate'type="text" class="easyui-datebox" style="width:30%;padding-left:30px;margin-left:30px;"
                    required="true">
            </div> -->
    </form>
    <!-- 按钮 -->
    <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清除</a>
        </div>


    </div>
</body>
<script>
    //点击提交出现当前时间
    // var date=new Date()
    // var $d = date.getDate();
    // var $y = date.getFullYear();
    // var $m = date.getMonth()+1;
    // var $time=$y+'-'+$m+'-'+$d
    // console.log($time)
    // $('.easyui-linkbutton').on('click',function(){
    //     $('.work').html($time)
    // })
    //:手机号码验证
    $.extend($.fn.validatebox.defaults.rules, {
    phoneNum: { //验证手机号
        validator: function(value, param){
         return /^1[3-8]+\d{9}$/.test(value);
        },
        message: '请输入正确的手机号码。'
    },

    agenum:{
        validator: function(value, param){
     	return /^(([0-9]|[1-9][1-9]|1[0-7][0-9])(\.[0-9]+)?|180)$/.test(value);
   },
   message:'请输入正确的年龄格式'
},
    });
    $('#dg').datagrid({
        url: 'http://localhost:3000/comment/list',
        pagination: true,
        method: 'post',
        columns: [[
            { field: 'ck', checkbox: true, align: "center" },
            { field: 'name', title: '姓名', width: '8%', align: "center" },
            { field: 'sex', title: '性别', align: "center", width:"5%" },
            // { field: 'age', title: '年龄', align: "center" ,width:"3%"},
            { field: 'hobby', title: '评论', width: '15%', align: "center" },
            {
                field: "brithday", title: '评论时间', align: "center", width: '14%', formatter: function (value, row, index) {
                    return moment().format('YYYY-MM-DD-HH:mm');
                }
            },
            {
                field: "boardDate", title: '过期时间', align: "center", width: '14%', formatter: function (value, row, index) {

                    var data= moment().add(10,'days')
                   return data.format('YYYY-MM-DD-HH:mm');
                }
            },

            { field: 'tel', title: '手机号', width: '10%', align: "center" },
            { field: 'email', title: '邮箱', width: '13%', align: "center" },
            { field: 'edu', title: '学历', width: '7%', align: "center" },
            // {
            //     field: "boardDate", title: '入职时间', align: "center", width: '12%', formatter: function (value, row, index) {
            //         return moment(value).format('YYYY-MM-DD');
            //     }
            // },
            {//修改和删除操作
                field: '_id', title: '用户操作', width: '14%', align: "center",
                formatter: function (value, row, index) {
                    return `<a style="padding:15px; background-image: linear-gradient(#8eb349, #5f7c22);border: 1px solid rgba(0,0,0,.2);border-radius: .3em; box-shadow: 0 1px white inset;color:white;text-decoration:none;" class="easyui-linkbutton"  href="javascript:editData('${row._id}')">修改</a> <a style="text-decoration:none;padding:15px;background-image: linear-gradient(#f00, #f00);border: 1px solid rgba(0,0,0,.2);border-radius: .3em;box-shadow: 0 1px white inset;text-shadow: 0 1px 1px black;color:white;font-weight: bold;" class="easyui-linkbutton" href="javascript:deleData('${row._id}')">删除</a>`;
                }
            }
        ]],
         toolbar: '#tb'

    });
//提交 函数的调用
function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {
                    var formData = $("#ff").serializeJSON();
                    if (formData._id.length > 0) {
                        // 修改操作
                        $.ajax({
                            url: `http://localhost:3000/comment/data/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).then(res => {
                            $('#dlg').dialog('close')
                            $('#dg').datagrid('reload');
                        })
                    } else {
                        // 新增操作
                        delete formData._id;
                        $.ajax({
                            url: 'http://localhost:3000/comment/data',
                            type: 'post',
                            data: formData
                        }).then(res => {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                        })
                    }
                }
            }
        });
    }
    //清除函数的调用
        function clearForm(){
            $('#ff').form('clear');
        }
//删除数据
function deleData(id) {
        $.messager.confirm('删除确认框', '你确认要删除该记录码?', function (r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/comment/data/${id}`,
                    type: 'delete'
                }).then(res => {
                    $('#dg').datagrid('reload');
                    $.messager.show({
                        title: '提示',
                        msg: '已经成功删除记录.',
                        showType: 'show'
                    });
                })
            }
        });
    }
    //修改文件函数
    function editData(id) {
        $('#ff').form('clear');

        $.ajax({
            url: `http://localhost:3000/comment/data/${id}`,
            type: 'get'
        }).then(res => {
            $('#ff').form('load', res);
            $('#dlg').dialog('open');//弹出对话框
        })

    }
    $("#addData").click(function () {
        $('#ff').form('clear');
        $('#dlg').dialog('open');
    })
    $("#searchData").click(function () {
        $('#dg').datagrid({
            url: 'http://localhost:3000/comment/list',
            method: 'post',
            queryParams: {//当请求远程数据时，发送的额外参数
                name: $("#searchName").val()//搜索框的内容
            }
        });
    })
    $("#removesData").click(function () {
        var dgSelections = $('#dg').datagrid('getSelections');
        var ids = [];
        for (let i = 0; i < dgSelections.length; i++) {
            ids.push(dgSelections[i]._id);
        }
        $.messager.confirm('删除确认框', '你确认要删除该记录码?', function (r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/comment/data/removes`,
                    type: 'post',
                    data: {
                        ids: ids.toString()
                    }
                }).then(res => {
                    $('#dg').datagrid('reload');
                    $.messager.show({
                        title: '提示',
                        msg: '已经成功删除记录.',
                        showType: 'show'
                    });
                })
            }
        });

    })

</script>

</html>